<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div style="position:absolute;right:0;top:3px">
                <table>
                    <tr>
                        <td>
                            <el-button type="primary" @click="btnRefresh" icon="el-icon-search" v-has="'PINQUERY'">查询</el-button>
                        </td>
                        <td>
                            <el-button @click="btnAdd" icon="el-icon-plus" v-has="'PADD'">新增</el-button>
                        </td>
                        <td>
                            <el-button @click="btnDelete" icon="el-icon-delete" v-has="'PDELETE'">删除</el-button>
                        </td>
                        <td>
                            <el-button @click="SaveRecord" icon="el-icon-document">保存</el-button>
                        </td>
                        <td>
                            <el-button @click="RecordExport" icon="el-icon-upload2" v-has="'PEXPORT'">导出</el-button>
                        </td>
                        <td>
                            <el-button @click="GroupCompare" icon="el-icon-s-order" v-has="'PMATCH'">工作组对照</el-button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="pagecenter">
            <div class="middle-center" style="height:100%;">
                <vxe-table :loading="loading" :data.sync="tableData" :row-class-name="rowClassName" @current-change="currentChangeEvent" border fit :mouse-config="{selected: true}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true}" @edit-actived="CellActive" :keyboard-config="keyConfig" height="auto" header-align="center" @edit-closed="EditChange" :edit-rules="xTable_validRules" highlight-current-row highlight-hover-row ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                    <vxe-table-column type="index" title="NO." width="60" align="center"></vxe-table-column>
                    <vxe-table-column field="codeno" title="标本拒收原因代码" width="180" :edit-render="{name:'input',autoselect: true}" sortable>
                    </vxe-table-column>
                    <vxe-table-column field="codena" title="标本拒收原因名称" width="220" sortable :edit-render="{name:'input',autoselect: true}">
                    </vxe-table-column>
                    <vxe-table-column field="inputcode" title="录入码" width="160" sortable :edit-render="{name:'input',autoselect: true}">
                    </vxe-table-column>
                    <vxe-table-column field="isphoto" align="center" title="是否必须拍照" width="80">
                        <template v-slot="{ row }">
                            <el-checkbox :true-label ="1" :false-label ="0" v-model="row.isphoto"></el-checkbox>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="kindno" title="代码类别" width="160" sortable align="center"></vxe-table-column>
                    <vxe-table-column field="securityflag" title="权限状态" width="100" sortable align="center"></vxe-table-column>
                </vxe-table>
            </div>
        </div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span><span class="el-icon-info">确定标本拒收原因名称为<b style="color:red">{{ message }}</b>的记录吗？</span></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="SubmitDel">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog v-el-drag-dialog :close-on-click-modal="false" title="请选择工作组对应标本拒收原因" :visible.sync="dialogGroupVsRejectVisible" width="1020px">
            <template>
                <div style="height:500px;width:100%;position:relative;">
                    <div class="poppagetop">
                        <div style="float:left;width:50%;text-align:center;margin-top:5px">
                            <table class="table1style">
                                <tr>
                                    <td>快速查询</td>
                                    <td>
                                        <el-input v-model="txtquicksearch" style="width:400px" placeholder="工作组代码或工作组名称" @keyup.enter.native="GetReqGroup"></el-input>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div style="float:left;width:50%;text-align:center;margin-top:5px">
                            <el-button @click="dialogGroupVsRejectVisibleSave">保 存</el-button>
                            <el-button @click="dialogGroupVsRejectVisible = false">取 消</el-button>
                        </div>
                    </div>
                    <div class="poppagecenter">
                        <div class="popmiddle-left">
                            <vxe-table show-overflow ref="xTable2" height="auto" :loading="poploading" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" fit :data.sync="PoptableData1" show-header-overflow highlight-current-row highlight-hover-row resizable border size="mini" @current-change="popcurrentChangeEvent">
                                <vxe-table-column type="index" title="NO." width="60"></vxe-table-column>
                                <vxe-table-column field="req_groupcode" title="工作组代码" width="100" header-align="center">
                                </vxe-table-column>
                                <vxe-table-column field="req_groupname" title="工作组名称" width="130" header-align="center"></vxe-table-column>
                                <vxe-table-column field="labgroupid" title="所属检验组" width="100" header-align="center">
                                </vxe-table-column>
                            </vxe-table>
                        </div>
                        <div class="popmiddle-right">
                            <vxe-table show-overflow ref="xTable3" height="auto" :loading="poploading" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" fit :data.sync="PoptableData2" show-header-overflow highlight-current-row highlight-hover-row resizable border size="mini">
                                <vxe-table-column type="index" title="NO." width="60"></vxe-table-column>
                                <vxe-table-column field="chk" title="选择" width="100" header-align="center" align="center">
                                    <template v-slot="{row}">
                                        <el-checkbox v-model="row.chk" true-label="1" false-label="0"></el-checkbox>
                                    </template>
                                </vxe-table-column>
                                <vxe-table-column field="codeno" title="拒收原因代码" width="100" header-align="center"></vxe-table-column>
                                <vxe-table-column field="codena" title="拒收原因名称" width="150" header-align="center">
                                </vxe-table-column>
                            </vxe-table>
                        </div>
                    </div>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
export default {
    name: "MNG223",
    data() {
        return {
            tableData: [],
            message: "",
            selectrow: [],
            curselectrow: "",
            txtquicksearch: "",
            actionindex: 0,
            tempindex: 0,
            labgroupid: 0,
            loading: false,
            poploading: false,
            dialogVisible: false,
            dialogGroupVsRejectVisible: false,
            ishsow: false,
            isFirstLoading: false,
            okFirstLoading: true,
            PoptableData1: [],
            PoptableData2: [],
            keyConfig: {
                isArrow: true,
                isDel: true,
                isTab: true,
                isEdit: true,
            },
            keyLocalConfig: {
                isArrow: true,
            },
            xTable_validRules: {
                codeno: [{ required: true, message: "标本拒收原因代码必须填写" }],
                codena: [{ required: true, message: "标本拒收原因名称必须填写" }],
                inputcode: [{ required: true, message: "录入码必须填写" }],
            },
        };
    },
    created() {
        this.InitPageDate(); //初始化主列表
    },
    mounted() {},
    updated() {
        if (this.okFirstLoading) {
            let currentrow = "";
            if (this.actionindex != 0) {
                //新增，修改，删除
                if (this.actionindex == 3) {
                    //如果是删除
                    if (this.tempindex > 0) {
                        currentrow = this.$refs.xTable.getData(this.tempindex);
                    } else {
                        currentrow = this.$refs.xTable.getData(0);
                    }
                } else {
                    //新增或修改
                    if (this.curselectrow && this.curselectrow != "") {
                        this.$nextTick(() => {
                            let row = this.curselectrow;
                            var alld = this.$refs.xTable.tableData;
                            for (var i = 0; i < alld.length; i++) {
                                if (alld[i].codeno == row.codeno) {
                                    this.tempindex = i;
                                    break;
                                }
                            }
                            currentrow = this.$refs.xTable.getData(this.tempindex);
                        });
                    } else {
                        currentrow = this.$refs.xTable.getData(0);
                    }
                }
            } else {
                //查询
                currentrow = this.$refs.xTable.getData(0);
                this.actionindex = 2;
                this.curselectrow = currentrow;
            }
            this.$nextTick(() => {
                if (currentrow) {
                    this.okFirstLoading = false;
                    this.$refs.xTable.setCurrentRow(currentrow);
                    this.message = currentrow.codena;
                }
            });
        }
        if (this.isFirstLoading) {
            this.PopUpdated();
        }
    },
    methods: {
        InitPageDate() {
            this.loading = true;
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG223",
                    method: "post",
                    data: {
                        action: "query",
                    },
                })
                .then((res) => {
                    this.tableData = res.Data;
                    this.loading = false;
                    this.okFirstLoading = true;
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
        PopUpdated() {
            this.$nextTick(() => {
                var currentrow = this.$refs.xTable2.getData(0);
                if (currentrow) {
                    this.isFirstLoading = false;
                    this.$refs.xTable2.setCurrentRow(currentrow);
                    this.labgroupid = currentrow.labgroupid;
                    this.GetReject();
                }
            });
        },
        GetReqGroup() {
            //获取工作组列表
            this.poploading = true;
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG223",
                    method: "post",
                    data: {
                        action: "GetReqGroup",
                        groupcode: this.txtquicksearch,
                    },
                })
                .then((res) => {
                    this.PoptableData1 = res;
                    this.poploading = false;
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
        GroupCompare() {
            //获取拒收原因列表
            this.dialogGroupVsRejectVisible = true;
            this.isFirstLoading = true;
            this.GetReqGroup();
            this.GetReject();
        },
        GetReject() {
            this.poploading = true;
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG223",
                    method: "post",
                    data: {
                        action: "GroupCompare",
                        labgroupid: this.labgroupid,
                    },
                })
                .then((res) => {
                    this.PoptableData2 = res;
                    this.poploading = false;
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
        popcurrentChangeEvent({ row }) {
            this.labgroupid = row.labgroupid;
            this.GetReject();
        },
        dialogGroupVsRejectVisibleSave() {
            let popxTable3Data = this.$refs.xTable3.getRecordset();
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG223",
                    method: "post",
                    data: {
                        action: "dialogGroupVsRejectVisibleSave",
                        labgroupid: this.labgroupid,
                        urec: popxTable3Data,
                    },
                })
                .then((response) => {
                    if (response.errcode == "1") {
                        this.$message({
                            message: "操作成功！",
                            type: "success",
                        });
                        this.GetReject();
                    } else {
                        this.$message({
                            message: "保存失败！" + response.errmsg,
                            type: "warning",
                        });
                    }
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
        btnRefresh() {
            this.InitPageDate();
        },
        rowClassName({ row, rowIndex }) {
            let isDirty = this.$refs.xTable.hasRowChange(row);
            if (isDirty) {
                return "row-modify";
            }
            if (this.$refs.xTable.hasRowInsert(row)) return "row-new";
        },
        currentChangeEvent({ row, $rowIndex }) {
            this.message = row.codena;
            this.actionindex = 2; //修改
            this.tempindex = $rowIndex;
            this.curselectrow = row;
        },
        btnAdd() {
            let initdata = {
                kindno: "REFUSEREASON",
                codeno: "",
                codena: "",
                inputcode: "",
                securityflag: "U",
            };
            this.$refs.xTable.insert(initdata).then(({ row }) => {
                this.$refs.xTable.setCurrentRow(row);
                this.$refs.xTable.setActiveRow(row, "codeno");
            });
            this.actionindex = 1; //增加
            this.FunscrollY();
        },
        FunscrollY() {
            this.$nextTick(() => {
                var alldataLen = this.$refs.xTable.tableData.length;
                let L = this.$refs.xTable.getTableData().fullData[alldataLen - 1];
                this.$refs.xTable.scrollToRow(L);
            });
        },
        btnDelete() {
            this.dialogVisible = true;
        },
        SubmitDel() {
            let delrow = this.$refs.xTable.getCurrentRow();
            if (delrow) {
                if (delrow.securityflag != "U") {
                    this.$message({
                        message: "取值不是U的属于系统内置的数据不可以被删除，但是可以修改！",
                        type: "warning",
                    });
                    //this.dialogVisible = false;
                    return false;
                }
                var alld = this.$refs.xTable.tableData;
                var rowindex = alld.indexOf(delrow);
                this.$refs.xTable.remove(delrow);
                this.actionindex = 3; //删除
                let havedata = this.$refs.xTable.tableData;
                if (havedata.length > 0) {
                    if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                    this.tempindex = rowindex;
                    let selectrow = havedata[rowindex];
                    this.$refs.xTable.setCurrentRow(selectrow);
                    this.message = selectrow.codena;
                }
            } else {
                this.$message({
                    message: "请选择要删除的记录！",
                    type: "warning",
                });
            }
            this.dialogVisible = false;
        },
        EditChange({ row,column,columnIndex, rowIndex }) {
            if(column.property == 'codena'){
                let thisinputcode = "";
                let getpinyin = this.$pinyin(row.codena, {
                    style: this.$pinyin.STYLE_FIRST_LETTER, // 首字母
                    heteronym: true,
                });
                for (var i = 0; i < getpinyin.length; i++) {
                    var curchar = getpinyin[i];
                    if (curchar.length > 1) {
                        thisinputcode += curchar[0];
                    } else {
                        thisinputcode += curchar;
                    }
                }
                //截取16个字符
                if(thisinputcode.length > 16){
                    thisinputcode = thisinputcode.substring(0,16);
                }
                //赋值
                row.inputcode = thisinputcode.toUpperCase();
            }
            else {
                var inputcode = row.inputcode;
                var pattern = /^[A-Za-z0-9]+$/;
                if(pattern.test(inputcode)){
                    //截取16个字符
                    if(inputcode.length>16){
                        inputcode=inputcode.substring(0,16);
                    }
                    //赋值
                    inputcode+="";
                    row.inputcode = inputcode.toUpperCase();
                }
                else{
                    row.inputcode = "";
                }
            }
        },
        SaveRecord() {
            this.$refs.xTable.validate((valid) => {
                if (valid) {
                    let tabledata = this.$refs.xTable.getRecordset();
                    if (tabledata.insertRecords.length > 0) {
                        this.curselectrow = tabledata.insertRecords[0];
                    }
                    this.$tool
                        .request({
                            url: "MNG/MNG2/MNG223",
                            method: "post",
                            data: {
                                action: "save",
                                urec: tabledata,
                            },
                        })
                        .then((response) => {
                            if (response.errcode == "1") {
                                this.$message({
                                    message: "操作成功！",
                                    type: "success",
                                });
                                this.InitPageDate();
                            } else {
                                this.$message({
                                    message: "保存失败！" + response.errmsg,
                                    type: "warning",
                                });
                            }
                        });
                }
            });
        },
        RecordExport() {
            this.$refs.xTable.exportCsv({ filename: "MNG223 标本拒收原因" });
        },
        CellActive({ row, columnIndex, column, rowIndex }) {
            this.actionindex = 2; //修改
            let len = this.$refs.xTable.tableData.length;
            if (rowIndex + 1 >= len) {
                if (row.codeno == null) {
                    row.kindno = "REFUSEREASON";
                    row.securityflag = "U";
                    this.$refs.xTable.setCurrentRow(row);
                    this.actionindex = 1; //新增
                    this.tempindex = this.$refs.xTable.getRowIndex(row);
                }
            }
        },
    },
};
</Script>

<style scoped>
.pagetop {
    width: 100%;
    height: 35px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;
}

.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 0px;
    overflow: auto;
}
::deep .middle-center tr td div .el-input__inner {
    border: 1px solid rgba(255, 254, 254, 0) !important;
    background-color: rgba(255, 254, 254, 0) !important;
}
::deep .vxe-table .vxe-body--column.col-orange {
    background-color: #ccc;
}
::deep tr.vxe-body--row.row-modify {
    color: blue !important;
}
.poppagetop {
    width: 100%;
    height: 40px;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    position: absolute;
    border: 1px solid #ccc;
    z-index: 999;
}
.poppagecenter {
    position: absolute;
    top: 50px;
    width: 100%;
    left: 0;
}
.popmiddle-left {
    position: absolute;
    height: 450px;
    width: 480px;
    left: 0px;
    overflow: auto;
}

.popmiddle-right {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 450px;
    width: 480px;
    right: 0px;
}
.table1style tr td {
    padding: 0px 2px 0px 5px;
}
</style>